<template>
<div id="background">
    <el-container>
        <el-header id="editAreaHeadPosition">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">编辑地区</span>
                    </el-col>
                    <el-col :xs="3" :sm="6" :md="6" :offset="5" class="imgCol">
                        <span class="titleSize" @click="editArea">保存</span>
                    </el-col>
                </el-row>
        </el-header>
        <el-main id="editAreaMainPosition">
            <el-row type="flex" class="rowHeight">
                <el-col class="imgCol">
                    
                   <!-- <el-cascader class="areaSelect" size="large" :options="areas" v-model="selectedArea" @change="handleChange"> </el-cascader>
                    <van-address-edit 
                        :area-list="areaList" 
                        show-postal 
                        show-set-default 
                        show-search-result 
                        :search-result="searchResult" 
                        @save="onSave" 
                        @change-detail="onChangeDetail">
                    </van-address-edit>-->
                    
                    <van-field
                        readonly
                        clickable
                        label="地区"
                        :value="ssqValue"
                        placeholder="选择地区"
                        @click="show = true"
                    />
                    <van-popup v-model="show" position="bottom" >
                         <van-area :area-list="areaList" :value="selectedArea"  @confirm="confirm" @cancel="cancel"/>
                    </van-popup>
                    
		
                </el-col>
            </el-row>
            
        </el-main>
    </el-container>

</div>    
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import { CodeToText,TextToCode } from 'element-china-area-data'
import AreaList from '../../assets/area/area';
import { Area ,Toast} from 'vant';
import { prototype } from 'events';
export default {
    data(){
        return{
            show:false,
            ssqValue:'',
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
            selectedArea:[],
            areaList:AreaList,
            info:{
                province:'',
                city:'',
                area:''
            }
            		
        }
    },
    mounted(){
    //     var bg = document.getElementById("background");
    //    // normalHeight=document.documentElement.clientHeight;
    //     console.log("height:"+normalHeight);
    //     bg.style.height = normalHeight+"px";
    //     bg.style.backgroundColor = "#FFFFFF"
    //     bg.style.margin = "0px";
        var normalHeight=sessionStorage.getItem('normalHeight');

        var head=document.getElementById("editAreaHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("editAreaMainPosition");
        var mainHeight=normalHeight/30 *26;
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";

     
        var province=this.$route.query.province;
        var city=this.$route.query.city;
        var area=this.$route.query.area;
     
        this.info.province=province;
        this.info.city=city;
        this.info.area=area;
        if(province==null){
                console.log('pro'+province);
                this.ssqValue='';
        }else{
                this.ssqValue=province+' '+city+' '+area;
                if(city=='北京市' ||city=='上海市' || city=='天津市' ||city=='重庆市'){
                        this.selectedArea=TextToCode[province]['市辖区'][area].code;
                }else{
                        this.selectedArea=TextToCode[province][city][area].code;
                }
        }
        console.log("ssqValue:"+this.ssqValue);
     
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        confirm(val){
            console.log("comfirm:");
            console.log(val);
            this.info.province=val[0].name;
            this.info.city=val[1].name;
            this.info.area=val[2].name;
            this.ssqValue=this.info.province+' '+this.info.city+' '+this.info.area;
            this.show=false;
        },
        cancel(val){
            console.log("cancel:");
            this.show=false;
        },
        //编辑地区
        editArea(){
            var URL=this.IP.IP+'/user/userInfo';
            console.log(URL);
            console.log(this.info);
            this.$ajax({
                method:'post',
                url:URL,
                params:this.info
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    Toast(response.data.data);
                         setTimeout(()=>{
                        this.back();
                    },500)
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>

.rowHeight{
    height:10%;
    background-color: #ffffff;
    /* margin-top: 10px; */

}
.el-main,el-header,el-footer,el-aside {
    padding: 0px ;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
#editAreaHeadPosition{
    background-color: #53cdf5;
}

.van-picker__cancel, .van-picker__confirm {
    padding: 0 15px !important;
    color: #53cdf5 !important;
    font-size: 1em;
}

.van-cell {
    color: #707070;
    font-size: 1em;

    /* border-bottom: #f5f4f9 1px solid; */
}
.van-picker-column__item {
    color: #707070;
}

.backSize{
    height: 26px;
}
.titleSize{
    /* font-size:1.125em; */

    font-size: 16px;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      /* font-size: 1em; */
  }
}

</style>
